<template>
  <div class="setting-container">
    <van-nav-bar
      class="app-nav-bar"
      title="账号设置"
      left-arrow
      @click-left="$router.push('/')"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="editForm.currentPass"
        type="password"
        name="原密码"
        label="原密码"
        placeholder="原密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="editForm.password"
        type="password"
        label="新密码"
        placeholder="新密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="repeatPassword"
        type="password"
        label="新密码"
        placeholder="请重复输入新密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import userApi from "@/api/user";
export default {
  name: "SettingIndex",
  data() {
    return {
      repeatPassword:null,
      editForm:{}
    }
  },
  computed: {},
  created() {

  },
  methods: {
    init() {

    },
    async onSubmit(){
      if (this.editForm.password!==this.repeatPassword){
        return this.$notify({type:'danger',message:'两次输入的新密码不一致'})
      }else{
        const{data:res} = await userApi.updatePass(this.editForm)
        if (res.code===200){
          //重新登录
          return this.$notify({type:'success',message:"修改密码成功,请重新登录",duration:1000,onClose:async () => {
              const {data: res} = await userApi.logout()
              if (res.code === 200) {
                //清除state中内容和localStorage中内容
                this.$store.commit('removeUser', null)
                //跳转到登陆页面
                await this.$router.push('/login')
              }
            }})
        }else {
          return this.$notify({type:'danger',message:res.msg})
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>

</style>
